<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-01 00:04:41
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }

    #grid-card {
        height: calc(100vh - 425px);
    }

    .total-map {
        height: calc(100vh - 345px);
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layuimini-title layui-font-20 items-center">
            <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
            巡查20250302000001
            <span class="layui-badge layui-bg-blue">已结束</span>
        </div>
        <div class="section">
            <div class="layui-row mb-5">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">任务编码：</label>
                    <span class="layui-font-black">20250302000001</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">执行人：</label>
                    <span class="layui-font-black">董志俭</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">计划开始时间：</label>
                    <span class="layui-font-black">2025-03-02 08:00:00</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">计划结束时间：</label>
                    <span class="layui-font-black">2025-03-02 23:59:00</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">计划作业次数、里程：</label>
                    <span class="layui-font-black">1次、1.39公里</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">实际作业次数、里程：</label>
                    <span class="layui-font-black">1次、0.7公里</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">覆盖率：</label>
                    <span class="layui-font-red">50%</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">所属计划：</label>
                    <span class="layui-font-black">巡查</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">业务类型：</label>
                    <span class="layui-font-black">秩序环境（海淀）</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">关闭原因：</label>
                    <span class="layui-font-black">--</span>
                </div>
            </div>
            <!-- solid -->
            <div class=" ">
                <div class="layui-row">
                    <div class="layui-col-md8">
                        <div class="view-map">
                            <div class="total-map">
                                <!-- 地图信息 -->
                                <div id="totalMapContainer" class="amap-container"></div>
                                <!-- 全屏/退出全屏 -->
                                <div class="fullscreen" id="onFullscreen">
                                    <i class="fullscreen-icon layui-icon layui-icon-screen-full"></i>
                                </div>
                            
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4 p-4">


                    </div>

                </div>
            </div>


        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/


        // 初始化地图 
        let mapCenter = miniAMap.defaults.mapCenter; // 默认北京中心点
        var map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: mapCenter // 默认北京中心点
            }
        })
         //https://lbs.amap.com/api/javascript-api-v2/documentation#maptype
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var type = new AMap.MapType({
                defaultType: 0,// 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0
                showTraffic: false,//叠加实时交通图层 默认值：false
                showRoad: false,//叠加路网图层 默认值：false

            });
            map.addControl(type);
        });
        setAmapPolygon()

        //获取左侧列表数据
        function setAmapPolygon() {
            $.getJSON("api/workOrderDetail.json", function (json) {
                console.log('json==', json)
                if (json.code === 0) {
                    renderGridCheck(json.data);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
        }



        // 存储多边形对象
        //当前选中
        function renderGridCheck(data) {

            data.lineList.forEach(item => {
                const gridName = item.lineName;
                const color = '#0080FF';
                const points = JSON.parse(item.lineScope); // 解析 lineScope 为数组
                const indexId = `grid_${item.id}`;
                const polygon = miniAMap.createPolyline(points, {
                    color: color
                });
                mapCenter = points[0]
                //重置中心 根据实际需求处理
                map.setCenter(mapCenter); // 仅设置中心

                const line = miniAMap.createPolyline(points, {
                    color: color,
                    zIndex: 20
                });


                const startMarker = miniAMap.createMarker(
                    {
                        position: points[100],
                        iconUrl: miniAMap.defaults.startIconUrl,
                        timeText: ` ${item.actualStart}`,
                        imgWidth: 30,
                        offsetX: -30,
                        offsetY: -50
                    }
                );

                const endMarker = miniAMap.createMarker({
                    position: points[99],
                    iconUrl: miniAMap.defaults.endIconUrl,
                    timeText: ` ${item.actualEnd}`,
                    imgWidth: 30,
                    offsetX: -30,
                    offsetY: -50
                });


                //最终
                const actualStartMarker = miniAMap.createMarker(
                    {
                        position: points[0],
                        iconUrl: miniAMap.defaults.actualStartIconUrl,
                        timeText: ` ${item.actualStart}`,
                        imgWidth: 50,
                        offsetX: -30,
                        offsetY: -50
                    }
                );

                const actualEndMarker = miniAMap.createMarker({
                    position: points[points.length - 1],
                    iconUrl: miniAMap.defaults.actualEndIconUrl,
                    timeText: ` ${item.actualEnd}`,
                    imgWidth: 50,
                    offsetX: -30,
                    offsetY: -50
                });



                map.add([line, actualStartMarker, actualEndMarker, startMarker, endMarker]);

                // 缓存图层实例
                const standardLayer = new AMap.TileLayer();
                const satelliteLayer = new AMap.TileLayer.Satellite();

                // 切换基础图层（标准 / 卫星）
                $('input[name="layer-base-item"]').on('change', function () {
                    if ($(this).is(':checked')) {
                        const layerId = $(this).data('id');
                        map.setFeatures([]);
                        if (layerId === 'AMap.TileLayer') {
                            // map.add(standardLayer);
                            // var selectedCardId = $('.layui-card.solid.selected').attr('id');
                            //重置中心 根据实际需求处理
                            map = miniAMap.initMap('totalMapContainer', {
                                zoom: 14,
                                layers: [//只显示默认图层的时候，layers可以缺省
                                    new AMap.createDefaultLayer()//高德默认标准图层
                                ],
                                center: mapCenter
                            })
                            map.add([line, actualStartMarker, actualEndMarker, startMarker, endMarker]);
                        } else if (layerId === 'AMap.TileLayer.Satellite') {
                            map.add(satelliteLayer);
                        }
                    }
                });



            });
        }




        $('#onFullscreen').on('click', function () {
            miniAMap.onFullscreen(map)
        });


    })
</script>